.root {
  --radio-size-xs: 16px;
  --radio-size-sm: 20px;
  --radio-size-md: 24px;
  --radio-size-lg: 30px;
  --radio-size-xl: 36px;
  --radio-size: var(--radio-size-sm);

  --radio-icon-size-xs: 6px;
  --radio-icon-size-sm: 8px;
  --radio-icon-size-md: 10px;
  --radio-icon-size-lg: 14px;
  --radio-icon-size-xl: 16px;
  --radio-icon-size: var(--radio-icon-size-sm);
  --radio-icon-color: var(--mantine-color-white);
}

.inner {
  position: relative;
  width: var(--radio-size);
  height: var(--radio-size);
  order: 1;

  &:where([data-label-position='left']) {
    order: 2;
  }
}

.icon {
  color: var(--radio-icon-color);
  opacity: var(--radio-icon-opacity, 0);
  transform: var(--radio-icon-transform, scale(0.2) translateY(rem(10px)));
  transition:
    opacity 100ms ease,
    transform 200ms ease;
  pointer-events: none;
  width: var(--radio-icon-size);
  height: var(--radio-icon-size);
  position: absolute;
  top: calc(50% - var(--radio-icon-size) / 2);
  left: calc(50% - var(--radio-icon-size) / 2);
}

.radio {
  border: 1px solid;
  position: relative;
  appearance: none;
  width: var(--radio-size);
  height: var(--radio-size);
  border-radius: var(--radio-radius, var(--radio-size));
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: background-color, border-color;
  transition-timing-function: ease;
  transition-duration: 100ms;
  cursor: var(--mantine-cursor-type);
  -webkit-tap-highlight-color: transparent;

  @mixin where-light {
    background-color: var(--mantine-color-white);
    border-color: var(--mantine-color-gray-4);
  }

  @mixin where-dark {
    background-color: var(--mantine-color-dark-6);
    border-color: var(--mantine-color-dark-4);
  }

  &:checked {
    background-color: var(--radio-color, var(--mantine-primary-color-filled));
    border-color: var(--radio-color, var(--mantine-primary-color-filled));

    & + .icon {
      --radio-icon-opacity: 1;
      --radio-icon-transform: scale(1);
    }
  }

  &:disabled {
    cursor: not-allowed;
    background-color: var(--mantine-color-disabled);
    border-color: var(--mantine-color-disabled-border);

    & + .icon {
      --radio-icon-color: var(--mantine-color-disabled-color);
    }
  }

  &:where([data-error]) {
    border-color: var(--mantine-color-error);
  }
}

.radio--outline {
  & + .icon {
    --radio-icon-color: var(--radio-color);
  }

  &:checked:not(:disabled) {
    background-color: transparent;
    border-color: var(--radio-color);

    & + .icon {
      --radio-icon-color: var(--radio-color);
      --radio-icon-opacity: 1;
      --radio-icon-transform: none;
    }
  }
}
